<template>
  <!--  榜单筛选 -->
  <div>
    <list/>
    <div class="content">
      <div class="card-content" v-for="(item, index) in CourseVideoList" :key="item.id">
        <el-card :body-style="{ padding: '0px' }" class="card" >
          <div class="cover-wrap">
            <div class="cover">
              <span class="origin-icon" style="display: none">原创</span>
              <div class="img" >
                <a>
                  <img :src="item.cover[0]" style="width: 100%"/>
                </a>
              </div>
              <img class="play-icon" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" style="border-style: none;"/>
            </div>
          </div>

          <div class="moment-detail">
            <div class="card-detail">
              <div class="title" title="这是一个标题" style="cursor: pointer">
                <div class="example">
                  <span class="flag course"></span>
                  <a href="xxx" class="differ-viewed">{{item.title}}</a>
                </div>
              </div>
              <div class="viewCount">
                <span class="num">{{item.statisticsBackup.viewCount}}人浏览</span>
              </div>
              <div class="interrelated-info">
          <span class="praiseCount">
            <svg class="info-icon icon">赞</svg>
            <i class="iconfont icon-yingyong"></i>
            <span class="num-info">{{item.statisticsBackup.favoriteCount}}</span>
          </span>
                <span class="commentCount">
            <svg class="info-icon icon">留言</svg>
            <span class="num-info">{{item.statisticsBackup.commentCount}}</span>
          </span>
                <span class="favoriteCount">
            <svg class="info-icon icon">收藏</svg>
            <span class="num-info">{{item.statisticsBackup.userCacheCount}}</span>
          </span>
              </div>
            </div>

            <div class="creator-info">
              <div class="left">
                <div class="creator">
                  <a>
                    <el-avatar :size="20" :src="item.creatorBackup.avatar" />
                  </a>
                </div>
                <a>
                  <span class="creator-name">{{item.creatorBackup.name}}</span>
                </a>
                <img class="certified-icon"/>
              </div>
              <span class="uploadTime" title="xxx">
          <time>{{ time(item.updateTime) }}</time>
        </span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "course",
});
</script>

<script setup lang="ts">
import list from "@/views/home/components/public/list.vue";
import Card from "@/components/card/index.vue";
import {onMounted, ref} from "vue";
import useHomeStore from '@/stores/home'

const homeStore = useHomeStore()
// 推荐视频列表
const CourseVideoList = ref<any>([])

// 获取教程列表
const getCourseList = async () =>{
  try {
    await homeStore.getCourseData(20,1)
    CourseVideoList.value = homeStore.recommendList.map((item:any) =>{
      return item
    })

    console.log(CourseVideoList, 55555)
  }catch (err:any){
    console.log(err.message)
  }

}



//处理时间戳
function time(time3:any) {
  var date = new Date(time3);
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var strDate =  M + D;
  return strDate
}

onMounted(() =>{
  getCourseList()
})
</script>

<style scoped lang="scss">
.content{
  display: flex;
  flex-flow: wrap;

  .card-content{
    margin-right: 20px;
    &:nth-child(5n) {
      margin-right: 0;
    }
    margin-bottom: 20px;

    .card{
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      width: 224px;
      height: auto;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 4px;
      box-sizing: border-box;
      .cover-wrap{
        height: 125.87611px;
        .cover{
          position: relative;
          width: 100%;
          height: 100%;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          overflow: hidden;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          .origin-icon{
            position: absolute;
            left: 5px;
            top: 5px;
            font-size: 10px;
            width: 40px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            text-align: center;
            background: url(https://rs.dance365.com/home_img_ycpc.png) no-repeat;
            background-size: cover;
          }
          .img{
            width: 100%;
            height: 100%;
            background-position: 50%;
            background-size: cover;
            background-image: url(https://rs.dance365.com/photo/6df5808…_rs_b230c5e….jpg?imageView2/0/w/300/h/1200/format/webp/ignore-error/1);
          }
          .play-icon{
            position: absolute;
            bottom: 6px;
            left: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
          }
        }
      }
      .moment-detail{
        width: 100%;
        color: #b1b5c1;
        height: 155px;
        .card-detail{
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 13px;
          border-bottom: 1px solid #ebeced;
          height: 104px;
          .title{
            font-size: 14px;
            color: #111;
            padding-top: 10px;
            padding-bottom: 0;
            line-height: 18px;
            height: 45px;
            width: 100%;
          }
          .viewCount{
            font-size: 12px;
            display: flex;
            -webkit-box-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            align-items: center;
            height: 32px;
            line-height: 32px;
            .num{
              word-break: keep-all;
            }
          }
          .interrelated-info{
            position: relative;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            font-size: 12px;
            height: 28px;
            line-height: 12px;
            padding-bottom: 12px;
            .praiseCount{

            }
            .info-icon{
              display: inline-block;
              width: 14px;
              height: 14px;
              margin-right: 5px;
            }
            .num-info{
              box-sizing: border-box;
              max-width: 36px;
              margin-right: 18px;
            }
          }
        }
        .creator-info{
          box-sizing: border-box;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;
          height: 50px;
          padding-left: 16px;
          position: relative;
          font-size: 12px;
          .left{
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            .creator{
              transform: translateY(1px);
              margin-right: 8px;
              .creator-name{
                color: #111;
                cursor: pointer;
                margin-left: 8px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              .certified-icon{
                margin-left: 4px;
                width: 12px;
                height: 12px;
              }
            }
          }
          .uploadTime{
            transform: translateY(1px);
            padding-right: 8px;
          }
        }
      }
    }
  }
}

</style>
